<template>
  <div class="tou">
    <!-- 书籍介绍部分 -->
    <div class="books">
      <!-- 书籍的封页 -->
      <div class="img">
        <img :src="bookInfo.coverUrl" style="width: 144px; height: 192px" />
      </div>
      <!-- 书籍的右边的其他信息 -->
      <div class="imgage">
        <!-- 书籍的作者和书名的显示 -->
        <span class="em">{{ bookInfo.bookName }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ bookInfo.writerInfoVo.nickName }}</span
        >&nbsp;&nbsp;著<br />
        <!-- 书籍的一些按钮标签 -->
        <el-row class="er">
          <el-button size="mini" round>{{
            bookInfo.serialStatus == "SERIALIZE" ? "连载中" : "完本"
          }}</el-button>
          <el-button
            size="mini"
            v-if="bookInfo.signingStatus == 'SIGNING'"
            round
            >已签约</el-button
          >
          <el-button type="danger" size="mini" round>{{
            bookInfo.parentCatalog
          }}</el-button>
          <el-button type="danger" size="mini" round>{{
            bookInfo.catalog
          }}</el-button>
        </el-row>

        <!-- 书籍的字数介绍 -->
        <div class="jiesao">
          <span class="ep">{{ bookInfo.words }}</span
          >&nbsp;万字&nbsp;|&nbsp;<span class="ep">{{
            bookInfo.numberOfChapters
          }}</span>
          &nbsp;章&nbsp;|&nbsp;<span class="ep">{{
            bookInfo.integral > 0 ? bookInfo.integral : 0
          }}</span
          >&nbsp;积分
          <!--          书籍id:{{id}}-->
        </div>

        <!-- 加入书籍的一些按钮 -->
        <el-row class="er">
          <el-button
            plain
            v-if="!isLogin || !userBook.bookId || !userBook.readChapterId"
            @click="toChapter()"
            >免费试读</el-button
          >
          <!-- 不仅要登陆还需要阅读过 -->
          <el-button
            plain
            v-if="isLogin && userBook.readChapterId"
            @click="toChapter(userBook.readChapterId)"
            >继续阅读</el-button
          >
          <el-button plain @click="bookshelf" v-if="!userBook.bookId"
            >加入书架</el-button
          >
          <el-button plain @click="showDS = true">互动打赏</el-button>
          <el-button
            plain
            @click="subscribe(id)"
            v-if="isLogin && userBook.bookId && userBook.subscribe != 'SIGNING'"
            >订阅</el-button
          >
        </el-row>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />

    <!-- 作品信息部分 -->
    <div class="production">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="作品信息" name="first">
          <!-- 书籍的介绍 -->
          <p>{{ bookInfo.briefIntroduction }}</p>
          <div>
            <el-divider></el-divider>
            <span class="ep">最新章节</span><br />
            <div class="chapters">
              <chapter-item
                class="chapterItem"
                v-for="chapter of bookInfo.chapterVosList"
                :key="chapter.id"
                :chapter="chapter"
                @click.native="toChapter(chapter.id, chapter.sort)"
              ></chapter-item>
            </div>
          </div>

          <el-divider></el-divider>

          <div class="fan">
            <!-- 粉丝互动的开发 -->
            <span class="ep">粉丝互动</span><br /><br />
            <div class="fans">
              <div class="fana">
                <span class="eo">积分</span><br /><br />
                <h2>本月积分</h2>
                <span class="ep">{{
                  bookInfo.risingPoints > 0 ? bookInfo.risingPoints : 0
                }}</span
                ><br /><br />
                <span>排名{{ bookInfo.scoreRanking + 1 }}</span>
                <span v-if="bookInfo.integralDifference > 0"
                  >还差{{ bookInfo.integralDifference }}追上前一名</span
                >
                <span v-if="bookInfo.integralDifference < 0"
                  >还差{{ -bookInfo.integralDifference }}被追上</span
                >
                <br />
                <br />
                <i class="el-icon-document"></i><br /><br />
                <el-button type="danger" round @click="showDS = true">打赏</el-button>
              </div>
              <!-- 我的粉丝等级 -->
              <div class="fanb pjz">
                <span class="ep">我的贡献</span><br /><br />
                <el-avatar v-if="!user"> user </el-avatar>
                <el-avatar v-if="user" :src="user.headPortraitUrl"></el-avatar>
                <!-- <img
                  
                  style="width: 60px; height: 60px; border-radius: 50%"
                /><br /> -->
                <br />
                <el-button
                  type="danger"
                  class="userAButt"
                  v-if="!isLogin"
                  @click="toLogin"
                  >登录后查看</el-button
                >
                <el-button
                  class="userAButt"
                  type="danger"
                  v-if="isLogin && userBook.contribution"
                  >{{ userBook.contribution }}</el-button
                >
                <el-button
                  class="userAButt"
                  type="danger"
                  v-if="isLogin && !userBook.contribution"
                >
                  你还没有打赏过当前书籍
                </el-button>
                <br />
                <el-divider></el-divider>
              </div>
            </div>

            <!-- 作者介绍部分 -->
            <div class="authora">
              <el-avatar
                class="tx"
                :src="bookInfo.writerInfoVo.headPortraitUrl"
              ></el-avatar>
              <span class="fe">{{ bookInfo.writerInfoVo.nickName }}</span
              ><el-divider></el-divider>
              <div class="shu1">
                <i class="el-icon-s-management"> </i><br /><br />
                作品数<br /><br />
                <span class="zuo">{{ bookInfo.writerInfoVo.bookCount }}</span>
              </div>
              <div class="shu">
                <i class="el-icon-notebook-1"> </i><br /><br />
                累计字数<br /><br />
                <span class="zuo1"
                  >{{ bookInfo.writerInfoVo.cumulativeNumberOfWords }}字</span
                >
              </div>
              <div class="shu">
                <i class="el-icon-date"> </i><br /><br />
                创作天数<br /><br />
                <span class="zuo">{{
                  bookInfo.writerInfoVo.creationDays
                }}</span>
              </div>
            </div>
          </div>

          <!-- 推荐 粉丝排行  -->
          <div class="paihang">
            <div class="tuijian">
              <span class="ep">强烈推荐</span><el-divider></el-divider>
              <div></div>
            </div>
            <!-- 粉丝排行榜的部分 -->
            <div class="fensi">
              <div class="fensipai">粉丝排行榜</div>

              <div
                v-for="(fan, index) of bookInfo.fans"
                :key="fan.id"
                class="siItem"
              >
                <div class="si">{{ index + 1 }}</div>
                <div class="siInfo">
                  <span class="sinickname">{{ fan.nickName }}</span>
                  <span class="contr">{{ fan.contribution }}</span>
                </div>
                <el-avatar
                  v-if="index < 3"
                  class="siImg"
                  :src="fan.headPortraitUrl"
                ></el-avatar>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="目录信息" name="second" :lazy="true">
          <div>
            <div class="a" v-if="userBook.bookId && userBook.readChapterTitle">
              <div class="a1">你已读至</div>
              <div class="a2">
                <span @click="toChapter(userBook.readChapterId)"
                  >{{ userBook.readChapterTitle }} >></span
                >
              </div>
            </div>
            <div class="chapterRq">
              <div
                v-for="chapter of chapters"
                :key="chapter.id"
                style="width: 30%"
                @click="toChapter(chapter.id, chapter.sort)"
              >
                <div style="float: left" class="information-title">
                  {{ chapter.sort }}、{{ chapter.title }}
                </div>
                <div style="float: right">
                  <i v-if="!chapter.purchased" class="el-icon-lock"></i>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="请选择分组" :visible.sync="dialogVisible" width="30%">
      <el-radio-group v-model="selectedGroupItem">
        <el-radio :label="group" v-for="group of groups" :key="group">{{
          group === "" ? "默认分组" : group
        }}</el-radio>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBookshelfSuccess">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打赏选择 -->
    <el-dialog title="打赏" :visible.sync="showDS" width="30%">
      <el-input-number
        v-model="dsNum"
        :min="1"
        :max="999999999"
        label="描述文字"
      ></el-input-number>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDS = false">取 消</el-button>
        <el-button type="primary" @click="reward">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBookInfo,
  bookChapter,
  userRelatedInformationOnBook,
  addBookshelf,
  selectGroups,
  updateSubscribe,
  selectChapterObj,
  rewardBook,
  selectbrowse,
} from "@/api/index";
import ChapterItem from "@/components/ChapterItem";
export default {
  components: { ChapterItem },
  data() {
    return {
      //打赏弹窗
      showDS: false,
      //打赏金额
      dsNum: 100,

      selectedGroupItem: "",
      groups: [],
      user: window.sessionStorage.getItem("userInfo") ? JSON.parse(window.sessionStorage.getItem("userInfo")) : null,
      userBook: {},
      chapters: [],
      bookInfo: {
        id: 0,
        bookName: "",
        writerInfoVo: {},
        coverUrl: "",
        serialStatus: "",
        signingStatus: "",
        parentCatalog: "",
        catalog: "",
        briefIntroduction: "",
        numberOfChapters: 0,
        chapterVosList: [],
        risingPoints: 0,
        scoreRanking: 0,
        integralDifference: 0,
        integral: 0,
        fanRanking: [],
        words: 0,
         bookIdss: this.$route.params.bookId,
      },
      //对话框
      dialogVisible: false,
      activeName: "first",
      //书籍id
      id: this.$route.params.id,
      // 推荐的其他书籍的信息
      // bookRecommend: {
      //   id: 0,
      //   name: "夜的命名术",
      //   authorId: 23,
      //   author: "会说话的肘子",
      //   imgPath: require("@/assets/book.jpg"),
      //   catalog1: "都市",
      //   catalog2: "异能",
      //   serialState: "连载",
      //   synopsis: "蓝与紫的霓虹中，浓密的钢铁苍穹下，",
      //   wordsNumber: 99999,
      //   newChapter: "最新章节",
      //   chapterId: 2334,
      // },
    };
  },

  computed: {
    isLogin: {
      get() {
        return window.sessionStorage.getItem("userInfo");
      },
    },
  },
  methods: {
    //打赏弹窗
    reward() {
      console.log("开始打赏")
      rewardBook(this.$route.params.id, this.dsNum)
        .then(({ data }) => {
          this.showDS = false;
          if (data.code == 0) {
            this.$message.success("打赏成功");
          } else if (data.code == 600) {
            this.$confirm("您的余额不足, 是否前往充值?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
          } else {
            this.$message.warning(data.message);
          }
        })
        .catch((err) => {});
      // this.showDS = true;
    },
    //加入订阅
    subscribe(bookId) {
      //TODO:订阅
      updateSubscribe(bookId)
        .then(({ data }) => {
          this.message("订阅加入成功", "warning");
        })
        .catch((err) => {
          this.message("订阅加入失败", "warning");
        });
    },
    //打开对话框选中分组
    bookshelf(bookId) {
      if (this.isLogin) {
        if (this.groups.length == 0) {
          selectGroups()
            .then(({ data }) => {
              this.groups = data.data;
              if (this.groups.length == 1) {
                this.selectedGroupItem = this.groups[0];
                this.addBookshelfSuccess();
              } else if (this.groups.length == 0) {
                this.selectedGroupItem = "";
                this.addBookshelfSuccess();
              } else {
                //打开对话框
                this.dialogVisible = true;
              }
            })
            .catch((err) => {
              this.message("加入失败", "warning");
            });
        } else {
          if (this.groups.length == 1) {
            this.selectedGroupItem = this.groups[0];
            this.addBookshelfSuccess();
          } else {
            //打开对话框
            this.dialogVisible = true;
          }
        }
      } else {
        console.log("需要登录");
        this.$router.push({
          name: "login",
        });
      }
    },
    addBookshelfSuccess() {
      this.dialogVisible = false;
      //TODO:加入书架
      console.log("加入书架", this.id, this.selectedGroupItem);
      addBookshelf(this.id, this.selectedGroupItem)
        .then(({ data }) => {
          let code = data.code;
          if (code != 0) {
            //加入失败
            this.message("加入失败", "warning");
          } else {
            this.message("加入成功", "success");
          }
        })
        .catch((err) => {
          //加入失败
          this.message("加入失败", "warning");
        });
    },
    message(message, type) {
      this.$message({
        showClose: true,
        message: message,
        type: type,
      });
    },
    toChapter(chapterId, sort) {
      console.log("前往章节id", chapterId);
      // if (chapterId) {
      //   //TODO:前往书籍详情页
      //   this.$store.commit("routeJump/updateChapterId", {
      //     bookId: this.id,
      //     chapterId,
      //     sort
      //   });
      // } else {
      //   console.log("前往章节id", this.bookInfo.chapterVosList[0].id);
      //   this.$store.commit("routeJump/updateChapterId", {
      //     bookId: this.id,
      //     chapterId: this.bookInfo.chapterVosList[0].id,
      //   });
      // }
      if (sort) {
        this.$store.commit("routeJump/updateToChapterAction", {
          chapterSort: sort,
        });
      } else {
        if (chapterId) {
          //根据id查询sort
          selectChapterObj(this.$route.params.id, chapterId)
            .then(({ data }) => {
              this.$store.commit("routeJump/updateToChapterAction", {
                chapterSort: data.data.chapterOrder,
              });
            })
            .catch((err) => {});
        } else {
          //啥也没传，免费试读\

          if (this.user == null) {
            this.$store.commit("routeJump/updateToChapterAction", {
              chapterSort: 1,
              
            });
          } else {
            selectbrowse(this.$route.params.id).then(({ data }) => {
              // console.log("cccccccccccccccccdadadadadadadada",data)
              this.$store.commit("routeJump/updateToChapterAction", {
                chapterSort: data.data,
              });
            });

            // this.$store.commit("routeJump/updateToChapterAction", {
            //   chapterSort: 1,
            // });
            // alert(this.user.id)
            // console.log(this.user,"user,,,,,,,,,,,,,,")
          }
        }
      }
    },
    toLogin() {
      console.log("前往登录页面");
      this.$store.commit("routeJump/isLogin");
    },
    handleClick(tab, event) {
      if (this.activeName === "second") {
        if (this.isLogin) {
          //查询用户购买章节
          //获取用户阅读进度
          bookChapter(this.id)
            .then(({ data }) => {
              console.log(data);
              this.chapters = data.data;
            })
            .catch((err) => {});
        } else {
          //获取目录信息
          bookChapter(this.id)
            .then(({ data }) => {
              console.log(data);
              this.chapters = data.data;
            })
            .catch((err) => {});
        }
        console.log("AAAA");
      }
      console.log(tab, event);
    },
  },
  created() {
    getBookInfo(this.id)
      .then(({ data }) => {
        console.log("信息", data.data);
        this.bookInfo = data.data;
      })
      .catch((err) => {});
    if (this.isLogin) {
      //TODO:已登录
      console.log("书籍id", this.id);
      userRelatedInformationOnBook(this.id)
        .then(({ data }) => {
          this.userBook = data.data;
          console.log(this.userBook.bookId == true);
          console.log("书架关系", data);
        })
        .catch((err) => {});
    }
  },
};
</script>

<style scoped>
.a {
  margin: 0 auto;
  height: 40px;
  width: 170px;
  border: 1px solid #ffde99;
  background-color: #fff7e7;
}
.a1 {
  height: 20px;
  width: 55px;
  font-size: 13px;
  margin-left: 15px;
  float: left;
  margin-top: 10px;
  color: #e77e20;
  font-weight: bold;
}

.a2 {
  height: 20px;
  width: 70px;
  font-size: 11px;
  float: left;
  margin-top: 11px;
  margin-left: 10px;
}
.a2 a {
  color: #b19480;
}
/* .tou {
  width: 100%;
  height: 1500px;
} */
.books {
  width: 1000px;
  height: 232px;
  margin: 0 auto;
  margin-top: 50px;
  border-left: 2.5px solid #e5e5e5;
  border-top: 2.5px solid #e5e5e5;
}
.production {
  width: 1000px;

  margin: 0 auto;
}
.img {
  width: 144px;
  height: 192px;
  margin-top: 20px;
  margin-left: 30px;
  float: left;
  /* border: 1px solid #e5e5e5; */
}

.imgage {
  width: 526px;
  height: 220px;
  margin-top: 20px;
  margin-left: 200px;
  /* border: 1px solid #e5e5e5; */
}
.em {
  font-size: 30px;
  font-weight: 700;
  margin-top: 20px;
}
.er {
  width: 526px;
  height: 30px;
  margin-top: 10px;
}
.jiesao {
  width: 526px;
  height: 30px;
  margin-top: 18px;
}
.ep {
  font-size: 20px;
  font-weight: 700;
}
.eo {
  font-size: 20px;
  font-weight: 700;
  color: #cc1414;
  margin-top: 100px;
}

.fe {
  margin-left: 135px;
}
.zuo {
  color: red;
  margin-left: 13px;
}
.zuo1 {
  color: red;
  margin-left: 5px;
}

.siItem {
  border-top: 1px solid #e6e6e6;
  height: 45px;
}

.si {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 20px;
  margin-top: 13px;
  color: #e5e5e5;
  font-weight: 700;
  text-align: center;
}
.siInfo {
  float: left;
  padding-left: 20px;
  line-height: 45px;
  width: 50%;
}
.sinickname {
  max-width: 100px;
}
.contr {
  float: right;
  max-width: 50px;
}
.siImg {
  float: right;
  margin-top: 2px;
  margin-right: 10px;
}
.fensi > div:nth-child(2) > .si {
  border: 1px solid #cc1414;
  background: #cc1414;
}
.fensi > div:nth-child(3) > .si {
  border: 1px solid #e08312;
  background: #e08312;
}
.fensi > div:nth-child(4) > .si {
  border: 1px solid #dabb0cf3;
  background: #dabb0cf3;
}
.fensi > div:nth-child(n + 5) > .si {
  border: 1px solid #ededed;
  background: #ededed;
  color: #666666;
}

.iv {
  width: 77px;
  height: 120px;
  margin-left: 10px;
  float: left;
}
.iva {
  width: 120px;
  height: 100px;
  margin-left: 96px;
}
.fan {
  width: 1000px;
  height: 440px;
}
.fana {
  width: 320px;
  height: 280px;
  margin-top: 20px;
  border-right: 1.5px solid #e5e5e5;
  text-align: center;
  float: left;
}
.fanb {
  width: 330px;
  height: 280px;
  margin-left: 320px;
  margin-top: 20px;
  text-align: center;
  /* border: 1px solid #e5e5e5; */
}

.paihang {
  width: 1000px;
  height: 400px;
}
.fans {
  width: 650px;
  height: 330px;
  background: #f7f6f2;
  float: left;
}
.authora {
  width: 300px;
  height: 360px;
  background: #f7f6f2;
  margin-left: 680px;
}

.tuijian {
  width: 650px;
  height: 550px;
  float: left;
}
.fensi {
  width: 300px;
  background: #f7f6f2;
  margin-left: 680px;
}
.fensipai {
  width: 300px;
  height: 30px;
  font-size: 20px;
  font-weight: 700;
  margin-left: 20px;
  padding-top: 20px;
}
.tui {
  width: 650px;
  height: 120px;
  /* border: 1px solid #e5e5e5; */
}
.tuiaa {
  width: 215px;
  height: 120px;
  float: left;
  /* border: 1px solid #e5e5e5; */
}
.tuia {
  width: 215px;
  height: 120px;
  float: left;
  /* border: 1px solid #e5e5e5; */
}
.tuias {
  width: 215px;
  height: 120px;
  margin-left: 430px;
  /* border: 1px solid #e5e5e5; */
}
.tx {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  margin-left: 100px;
}
.shu1 {
  width: 90px;
  height: 150px;
  float: left;
  margin-left: 20px;
}
.shu {
  width: 90px;
  height: 150px;
  float: left;
}
.chapterItem {
  width: 50%;
  padding: 10px 5px;
}
.chapterItem:hover {
  color: #cc1414;
  font-size: 1.5em;
}
.chapters {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: wrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: space-between;
  /* 项目的第一行文字的基线对齐。 */
  align-items: baseline;
}
.chapterRq {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: wrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: space-between;
  /* 项目的第一行文字的基线对齐。 */
  align-items: baseline;
}
.chapterRq > div {
  padding: 10px 5px;
}
.information-title {
  display: block;
  text-overflow: ellipsis; /*超出内容用省略号*/
  overflow: hidden; /*内容超出后隐藏*/
  white-space: nowrap; /*文本不进行换行*/
}
.chapterRq > div:hover {
  color: #cc1414;
  font-size: 1.5em;
}
.info {
  margin: 0 auto;
  padding: 0 auto;
  width: 200px;
  height: 35px;
  line-height: 35px;
  background-color: #fff7e7;
}
.jz {
  margin: 0 auto;
}
.pjz {
  padding: auto;
}
.userAButt {
  margin-top: 15px;
}
</style>